<template>
  <div class="preview-warpper">
    <el-table :data="tableData" :header-cell-style="{ background: '#F7F8FA' }" border class="table-box">
      <el-table-column label="商品信息" width="450">
        <template slot-scope="scope">
          <div class="table-shop-info">
            <img :src="scope.row.shopImg" alt="商品图片" style="max-width: 60px; max-height: 60px; border-radius: 8px;">
            <div style="margin-left: 12px;">
              <p class="table-shop-title">
                <span>{{ scope.row.shopTitle }}</span>
              </p>
              <p>
                <span><span style="color: #999999;">ID：</span><span style="color: #4E78EF;">{{ scope.row.shopId }}</span></span>
                <i class="el-icon-copy-document" style="margin-left: 6px; cursor: pointer;" @click="copy(scope.row.shopId)" />
              </p>
              <p><span style="color: #999;">编码/货号：<span style="color: #000;">{{ scope.row.shopCode }}</span></span></p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="startText" label="原内容" />
      <el-table-column prop="endText" label="调整后内容" />
      <el-table-column fixed="right" label="操作" width="60">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleRemove(scope.row)">排除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { copyTool } from '../../../utils/tool'
export default {
  data() {
    return {
    }
  },
  created() {
    const result = {
      'data': [
        {
          'data': {
            'goods_id': '631061976233',
            'goods_image': 'https://img.pddpic.com/open-gw/2024-07-08/51c20b77333abc5e10c702365d37709f.jpeg',
            'goods_name': '卧槽百搭高街直筒修身阔腿喇叭裤子完了',
            'goodsCode': ''
          },
          'source': '水洗微喇牛仔裤女秋季百搭高街直筒修身阔腿喇叭裤子潮牌',
          'dest': '卧槽百搭高街直筒修身阔腿喇叭裤子完了',
          'code': 200,
          'msg': '操作成功'
        },
        {
          'data': {
            'goods_id': '631045258197',
            'goods_image': 'https://img.pddpic.com/open-gw/2024-07-08/8fd941ebebc4c41c62eb87a6514b3ae8.jpeg',
            'goods_name': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
            'goodsCode': ''
          },
          'source': '90白鸭绒羽绒服男款冬季美式国潮原创潮牌保暖防风加厚面包服学生',
          'dest': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
          'code': 200,
          'msg': '操作成功'
        },
        {
          'data': {
            'goods_id': '631037302997',
            'goods_image': 'https://img.pddpic.com/open-gw/2024-07-08/8fd941ebebc4c41c62eb87a6514b3ae8.jpeg',
            'goods_name': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
            'goodsCode': ''
          },
          'source': '90白鸭绒羽绒服男款冬季美式国潮原创潮牌保暖防风加厚面包服学生',
          'dest': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
          'code': 200,
          'msg': '操作成功'
        },
        {
          'data': {
            'goods_id': '631035757504',
            'goods_image': 'https://img.pddpic.com/open-gw/2024-07-08/8fd941ebebc4c41c62eb87a6514b3ae8.jpeg',
            'goods_name': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
            'goodsCode': ''
          },
          'source': '90白鸭绒羽绒服男款冬季美式国潮原创潮牌保暖防风加厚面包服学生',
          'dest': '卧槽冬季美式国潮原创潮牌保暖防风加厚面包服完了',
          'code': 200,
          'msg': '操作成功'
        }
      ],
      'code': 200,
      'msg': '成功'
    }
    const data = result.data
    this.tableData = Array.isArray(data)
      ? data.map(item => ({
        shopId: item.data.gooods_id,
        shopImg: item.data.goods_image,
        shopTitle: item.data.goods_name,
        shopCode: item.data.goodsCode,
        startText: item.source,
        endText: item.dest
      }))
      : []
  },
  methods: {
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    },
    handleRemove(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.preview-warpper {
  .table-box {
    margin-top: 20px;
    max-width: 100%;
    .table-shop-info {
      display: flex;
      align-items: center;
      p {
        margin-top: 4px;
        &:first-of-type {
          margin-top: 0;
        }
      }
      .table-shop-title {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          flex: 1;
        }
        span:nth-child(2) {
          margin-left: 12px;
          color: #4E78EF;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
